Sample Final Project

I'm going to pick a topic and then explain how I would complete each of the sections of the final project.

Choice of subjects

You can do anything you like. For my sample, I'm going to do a website about visiting Patagonia, a place I went to in February 2012.

Site will be created in Dreamweaver and set up correctly in that program.

When I start my project, I'm going to make a new folder for it. I will immediately test and make sure that uploading works and that it goes into its own folder.

It is not acceptable to have your final project files mixed up with other files from other projects and lessons. Your final project should be in its own folder on the server, and on your computer.

If you are not sure what is going on on the server, use the "remote view" feature of Dreamweaver to see what is there.

Create an original layout and style sheet for font styles.

Creating your template is the core of this project.

Dreamweaver contains a number of canned designs. You can use these for inspiration, but you should really make your own design.

I'm going to create a template (dwt) for my Patagonia website.

I'm going to find a nice picture of Patagonian wilderness, and over it, I'm going to put "Patagonia - Fin del Mundo" as the title. This will be my header. Below this I'm going to have a horizontal spry menu of pages. At the bottom of the page I'm going to have a copyright notice.

With my template I'm going to create a separate CSS style sheet to define my page and fonts. I'm going to do colors in shades of blue. The background will be black. Headers (h1, h2, h3) will all be Arial. Paragraph text will be times. All of this styleinformation will be in my style sheet, but its only three or four entries so it should only take a few minutes.

If you are not clear on how to make a template page, refer to my instructions on this subject.

Create at least 8 pages in the site

These pages will be:

I will create these pages after I have created my page design template. You can change the template later and the pages will come into line.

Site file structure will include a reasonable file structure (not all in one folder)

I'm going to keep my images in an images folder, my templates in a Templates folder, and Spry elements in their own folder.

Note that you can move things around a bit after you design your page. So I will probably build all my pages and then organize the files when I am done.

Each page will have a "Title" defined using the appropriate html tag.

This is done in the template. The "title" should be an editable area within the template. I'm going to put in temporary text that says "Patagonia - Fin del Mundo" in the template. Then I will replace this on each page with the name of the page.

Include at least one ordered or one unordered list using the appropriate html tags

In the pages "Califate" and "Tierra Del Fuego" I am going to have lists of things you can see. All you have to do to create a list is type it up and then select format -> list from the menu in Dreamweaver.

At least one page will have a template style

I'm using a template for all of my pages except the form.

At least one page will have a page layout using tables

I'm going to create a table layout for my form. This will allow me to easily control what the page looks out and where the various form elements come up.

If you don't know how to use a table layout, see my instructions on this subject.

At last one page will have a page layout using Divs and CSS styles

I'm going to include this in my template. I'm going to generally follow the example I did in class on how to crate a div layout, but I will summarize here.

The page will have a div called everything, which is the page, and which will have height and width set in CSS. Inside this div will be three areas called Header, Content, and Footer. Each of these will be floated lef using CSS. It's a very simple layout but it will work and it will meet the requirements of the assignment.

If you don't know how to make a page template, check that section in the book, or see my instructions on this subject.

If you can't make a page template, then use one of the canned templates from Dreamweaver and customize it a bit. This won't get you full points but it's a lot better to get something done.

You can come back later and make a different layout, if you want, which means, if you use one of the Dreamweaver templates, you can come back later and replace it with your own, and keep all your content.

The key to make this work correctly is to keep the names of the editable areas the same. See the instructions for template -> applly template to page to see how to replace one template with another.

Alternately, you can use cut and paste to stick your materials into a new template. It's not the slickest way to do it, but it will work and should not take more than about ten minutes.

Anyway, if creating a template throws you off, don't let this slow you down, just go ahead and build your pages and come back to this later.

Pages will include at least one internal, one external hyperlink and one email link

I will have internal links in the menu, external links to various websites about Patagonia, and an email link in the footer next to the copyright notice.

At least one page will include an original photo which the student has uploaded

I will include photos of Patagonia which I took this February.

Site will include a working form

My form will be a comments form. I will lay it out with tables. I will try to include one of each type of form element. The form will be nonsense, it's just designed to show that I know how to make forms.

If you don't know how to make a form, see my page on this subject.

Note that my sample form doesn't actually work, we will add functionality in the second part of this sample project.

Site will include a working menu

I am including a Spry menu in my page design. If I have time I may replace this with my own home made menu.

If you don't know how to do this, refer to the section in the book, or have a look at my notes on Spry Menus.

Site will be uploaded to server, and all functions will work

I will create a folder on the server in my area, called "final-project-patagonia" and I will upload my site there. I will test it and make sure that everything works.

One embedded video

On the page about Calafate, I will include a video I took of glacier falling into the water. I will post this video to Youtube, and then link to it using a Youtube embedded link. You don't have to use an original video but it happens that I have one.

Embedding a video is super super easy. Just go to Youtube, and copy the "embedded link" into your web page.

One map

On my Patagonia page, I'm going to have a Google map of Patagonia.

It is minimally sufficient to simply go to Patagonia in Google Maps, and then copy the embedded link from there to my page.

I'm going to go for some extra credit on this by adding some "push pins" to the map. If you don't know how to do this, here are some instructions.

Folders

Don't forget, you need to organize your files in folders. Our site isn't really large enough for this to make much sense but if I have time I will do it.

One self taught design element will be included in site

If I have time, I will make some rollover buttons for my menu, or some other kind of rollover. Here are some instructions. I might also make some glossy buttons. You could make callouts for a Google Map. You could try making an image map.